<template>
  <div>
    <div class="bg-grey-2">
      <div class="flex justify-center main-page">
        <div>您好！欢迎访问云县医共体平台官方网站！</div>
        <q-space />
        <div class="q-px-sm">云县人民医院</div>
        <q-separator vertical />
        <div class="q-px-sm">云县中医医院</div>
        <q-separator vertical />
        <div class="q-px-sm">云县妇幼保健院</div>
        <q-separator vertical />
        <div class="q-px-sm">云县乡镇卫生院</div>
      </div>
    </div>
    <div class="main-page">
      <div class="row">
        <div class="col-auto">
          <q-img
            width="100px"
            src="http://yxygt.yxrmyy.cn/static/pc/image/logo.png"
          ></q-img>
        </div>
        <div class="col flex justify-center items-center">
          <div v-for="item in items" :key="item.id">
            {{ item }}
          </div>
          <div
            class="tab-item cursor-pointer"
            :class="{ 'bg-red': a }"
            @mouseleave="a = true"
            @mouseover="a = false"
          >
            首页
          </div>
          <q-separator vertical />
          <div class="tab-item cursor-pointer non-selectable">
            医共体单位
            <q-menu class="no-shadow bg-accent text-white no-border-radius">
              <q-list dense style="min-width: 100px">
                <q-item clickable v-close-popup>
                  <q-item-section>Open...</q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>New</q-item-section>
                </q-item>
                <q-separator />
                <q-item clickable>
                  <q-item-section>Preferences</q-item-section>
                  <q-item-section side>
                    <q-icon name="keyboard_arrow_right" />
                  </q-item-section>

                  <q-menu anchor="top end" self="top start">
                    <q-list dense>
                      <q-item v-for="n in 3" :key="n" clickable>
                        <q-item-section>Submenu Label</q-item-section>
                        <q-item-section side>
                          <q-icon name="keyboard_arrow_right" />
                        </q-item-section>
                        <q-menu auto-close anchor="top end" self="top start">
                          <q-list dense>
                            <q-item v-for="n in 3" :key="n" clickable>
                              <q-item-section>3rd level Label</q-item-section>
                            </q-item>
                          </q-list>
                        </q-menu>
                      </q-item>
                    </q-list>
                  </q-menu>
                </q-item>
                <q-separator />
                <q-item clickable v-close-popup>
                  <q-item-section>Quit</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </div>
          <q-separator vertical />
          <div class="tab-item cursor-pointer non-selectable">
            医共体介绍
            <q-menu>
              <q-list dense style="min-width: 100px">
                <q-item clickable v-close-popup>
                  <q-item-section>Cut</q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>Copy</q-item-section>
                </q-item>
                <q-item clickable v-close-popup>
                  <q-item-section>Paste</q-item-section>
                </q-item>
                <q-separator />
                <q-item clickable v-close-popup>
                  <q-item-section>Select All</q-item-section>
                </q-item>
              </q-list>
            </q-menu>
          </div>
        </div>
        <div class="col-auto">fdsfdsa</div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "vue";
export default defineComponent({
  setup() {
    const tabsOptions = [
      {
        title: "首页",
      },
      {
        title: "医共体单位",
      },
      {
        title: "医共体介绍",
      },
    ];
    return { tabsOptions };
  },
});
</script>

<style lang="scss" scoped>
.tab-item {
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 12px;
}
</style>
